<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性  vertical-align
		     功能：1.应用于表格中单元格【栅格布局】
			      2.行内元素与行内块元素对齐方式
				    理解：文本和图片对齐方式【垂直居中】
				    元素种类：
					行内元素：典型行内元素 span、a、文本
					特点：在一行内显示、不可设置宽高
					块级元素：典型块级元素 div、p
					特点：独占一行、可设宽高
					行内块元素：典型行内块元素 img
					特点：在一行内显示、可设宽高
					页面组成：元素之间嵌套生成
					三种元素相互嵌套  √  嵌套根据元素特点页面混乱
					嵌套条件1：在一行内显示 【效果】
					          块套行  √ 推荐
							  行套行  √
							  行套块  √  增加条件,块添加宽高，造成页面混乱 ×
							  块套块  √
					嵌套条件2:独占一行【效果】
					        块套行  √  推荐
							行套行  ×
							行套块  ×  混乱
							块套行  √
		 -->
		 <style>
			 /*抓每个img
			 派生(后代)选择器:
			 特点：抓取父元素中所有(后代)子元素 【元素嵌套特点】
			 伪类选择器:
			 特点：在选择器后,过滤符合“特定条件”某个元素
			 nth-child:选中父元素中第N个
			 符合条件：p中包含4个img
			 id抓取父元素：空间大
			 class抓取父元素中某个子元素：微调
			  */
			 	i mg:nth-child(1){
			 		 border: 10px solid red;
			 	 }
				 im g:nth-child(2){
					 border: 20px solid #ff0;
				 }
				 /* 标准抓取每个img方案 */
				 p img.baseline{
					 vertical-align: baseline;
				 }
				 p img.top{
					 vertical-align: top;
				 }
				 p img.middle{
					 vertical-align: middle;
					 /* vertical-align与text-align区别
					 区别1：属性值不同
					    2：vertical-align操作文本和图片垂直
						   text-align操作文本左右和居中以及两边对齐
					 */
				 }
				 p img.bottom{
					 vertical-align: bottom;
				 }
		 </style>
	</head>
	<body>
		<span>行内元素<div style="border: 1px solid red; height: 100px;">块级元素</div></span>
		<div><span>111</span></div>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>皮卡丘<img class="baseline" src="img/img_1.png" alt="皮卡丘" width="60px" height="80px">基线对齐</p>
		<p>十万伏特<img class="top" src="img/img_2.png" alt="十万伏特" width="60px" height="80px">顶部对齐</p>
		<p>百万伏特<img class="middle" src="img/img_3.png" alt="百万伏特" width="60px" height="80px">中间对齐</p>
		<p>千万伏特<img class="bottom" src="img/img_4.png" alt="千万伏特" width="60px" height="80px">底部对齐</p>
		<!-- 需求：垂直方向属性  4个属性值
		           如果，不改变现有html结构，可以找到依次4个img
				   抓每个--4个图片
			思路：派生选择器+伪类选择器
			     p img:nth-child(1)
		 -->
	</body>
</html>